<!DOCTYPE html>
<html>

<head>
    <title>商铺列表</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/weui-master/dist/style/weui.min.css" rel="stylesheet">
    <link href="../lib/fontawesome/css/font-awesome.min.css" rel="stylesheet" >
    <link href="../sys/css/foot.css" rel="stylesheet" >

    <style>
    body {
        background-color: #fff;
    }
    
    .search {
        width: 100%;
        background-color: #325AA8;
        text-align: center;
        height:40px;
        line-height: 40px;
        padding-top: 7px;
    }
    
    .search input {
        width: 70%;
        /*margin-top: 0.5rem;*/
    }
    
    .fa-search {
        color: white;
        font-size: 1.5rem;
        padding-left: 0.5rem;
    }
    
    .shopbox {
        overflow: auto;
        /*margin-top: 40px;*/
    }
    
    .shop {
        padding-bottom: 1rem;
        border-bottom: 1px solid #d1d1d1;
    }
    
    .shopup img {
        width: 3rem;
        height: 3rem;
        margin: 10px;
        border: 1px solid #ddd;
    }
    
    .shopnamebox {
        width: 80%;
        display: inline-block;
    }
    
    .shopup .mybutton {
        height: 1.5rem;
        line-height: 1.5rem;
        width: 2.5rem;
        background-color: #fff;
        color: gray;
        border-radius: 5px;
        border: 1px solid #d1d1d1;
    }
    
    .shopgoods {
        position: relative;
        width: 31.5%;
        height: 115px;
        display: inline-block;
        margin-right: 1%;
    }
    
    .shopgoods img {
        width: 100%;
        height: 100%;
    }
    
    .shopgoods .coverprice {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.87);
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="box">
        <header class="search">
            <input type="text" name="" v-model.trim="shopskeywords">
            <i class="fa fa-search " @click="shoplist()"></i>
        </header>
        <section class="shopbox">
            <div class="shop" v-for="shop in shops" >
                <div class="shopup" @click=jumpToShop(shop.id)>
                    <div class="shopnamebox">
                        <img :src="shop.headImg" alt="">
                        <span class="shopname" v-text="shop.shopname"></span>
                    </div>
                    <button class="mybutton">进店</button>
                </div>
                <div class="shopdown">
                    <div class="shopgoods" v-for="goods in shop.shopgoods" @click="jumpToGoodsdetail(goods.id)">
                        <img :src="goods.goodsImg" alt="">
                        <div class="coverprice" v-text="goods.goodsprice"></div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <my-foot @choose="choosemune"></my-foot>
        </footer>
    </div>
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="../sys/js/foot.js"></script>
    <script src="../data/shop.json"></script>
    <script>
    $(function() {

        var windowHeight = $(window).height();
        var footheight = $("footer").height();
        $(".shopbox").css("height", windowHeight - footheight - 40);

        var box = new Vue({
            el: '.box',
            data: datalist,
            components: {
                myFoot
            },
            methods: {
                choosemune: function(i) {
                    window.location.href = menulist[i];
                },
                jumpToShop:function(id){
                    window.location.href="shop.html?id="+id;

                },
                jumpToGoodsdetail:function(id){
                    window.location.href="goodsdetail.html?id="+id;
                }

            }
        })
        $("footer ul li").removeClass("active");
        $("footer ul li:nth(1)").addClass("active");
    })
    </script>
</body>

</html>
